/**
 * 阶段链
 *
 * @author johnny
 * @date 2018/12/13
 */

//颜色值
var color =new Array("progress-bar-success","progress-bar-info","progress-bar-warning","progress-bar-danger");
var colorNoComple ="no-comple";
/**
 * 获取进度调
 *
 * @param data 进度条数据
 * @param stageName 进度条上显示的数据的key
 * @param stageInfo 数组，进度条下显示的数据的key
 * @param complet 是否完成的key
 * @return String 生成的html
 * @create on 2018/12/13 by johnny
 */
function getStepsBar(data,stageName,stageInfo,complet){
    var html = "";
    html +="<div class=\"progress\">";
    //计算每个阶段的宽度（百分比）
    var width = getSetpLength(1,data.length);
    //计算下方信息的的宽度（本应该一样，但是list-inline的宽度不到100%，我看盒模型也没找到）
    var infoWidth = getSetpLength(0.98,data.length);
    for(var i=0;i<data.length;i++){
        //如果不需要区分是否完成或者需要但已完成
        if(complet==null || data[i][complet] == true){
            html+=
                "<div class=\"progress-bar "+color[i%4] +"\" role=\"progressbar\"\n" +
                "     aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\"\n" +
                "     style=\"width: "+width+";\">\n" +
                "     <span >"+ data[i][stageName] +"</span> " +
                "</div>"
        }else{
            html+=
                "<div class=\"progress-bar "+colorNoComple +"\" role=\"progressbar\"\n" +
                "     aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\"\n" +
                "     style=\"width: "+width+";\">\n" +
                "     <span >"+ data[i][stageName] +"</span> " +
                "</div>"
        }

    }
    html+="</div>";

    //如果需要在阶段链下面显示信息
    if(stageInfo !=null && stageInfo.length>0){
        for(var j = 0;j<stageInfo.length;j++){
            var field =stageInfo[j];
            html+="<ul class=\"list-inline\" style=\"width: 100%;\">";
            for(var i=0;i<data.length;i++) {

                if(data[i][field] == null ||data[i][field] == "undefined"){
                    html +=
                        "<li class='step-info' style=\"width: " + infoWidth + "\"></li>";
                    continue;
                }else{
                    html +=
                        "<li class='step-info' style=\"width: " + infoWidth + "\">"+data[i][field]+"</li>";
                }
            }
            html+="</ul>";
        }
    }
    return html;
}

/**
 * 方法描述
 *
 * @param totalWidth 总长度，100% 为1
 * @param total 数据长度，也就是有几个阶段
 * @return int 百分比的数据
 * @throws Exception 异常
 * @create on 2018/12/13 by johnny
 */
function getSetpLength(totalWidth,total){
    return (Math.round(totalWidth / total * 10000) / 100.00 + "%");
}